<!-- subpkg_medicine/payment/index.vue -->
<script lang="ts" setup>
  import { payOrderApi } from '@/api/consult';
import { addressListApi, createOrderApi, preOrderApi } from '@/api/medicine'
  import type { Address, OrderPre } from '@/types/medicine'
  import { ref } from 'vue'

  // 1. 收货地址信息
  const addressInfo = ref({} as Address)
  // 用户收货地址
  const getAddressList = async () => {
    // 地址列表接口
    const data = await addressListApi()
    // 渲染地址列表数据
    addressInfo.value = data[0]
  }
  // 获取收货地址列表
  getAddressList()
  //2.订单药品信息
  const props = defineProps<{ id: string }>()
  // 预付订单信息
  const preOrderInfo = ref({} as OrderPre)
  // 药品预付订单
  const getPreOrder = async () => {
    if (!props.id) return
    // 预付订单接口
    const data = await preOrderApi(props.id)
    // 渲染预付订单信息
    preOrderInfo.value = data
  }

  getPreOrder()
  // 3. 待支付订单ID

  // 支付渠道组件实例
  const paymentRef = ref()

  // 关闭支付渠道弹层
  const onPaymentClose = async() => {
    const res = await uni.showModal({
      title: '温馨提示',
      content: '你确定放弃支付吗？',
    })
    if (res.confirm) {
      paymentRef.value?.close()
    }
    if (res.cancel) {
      // 关闭所有页面，去首页
      // uni.reLaunch({ url: '/pages/my/index' })
    }
  }

  // 支付渠道确认支付
  const onPaymentConfirm =async (index:number) => {
    uni.showToast({ title: '立即支付渠道为' + index })
    if (index === 0) {
      uni.showToast({
        title: '系统暂未开启此功能',
      })
      return
    }
    uni.showLoading({ title: '支付中...' })
    // 支付宝支付，参数发送给后端，后端生成支付 URL
    const res = await payOrderApi({
      orderId: orderId.value,
      paymentMethod: index,
      payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/index',
    })
    uni.hideLoading()
    // #ifdef H5
    location.href = res.payUrl // H5 端改变栏地址为支付 URL
    // #endif
  }

  // 选择支付渠道
   // 待支付订单ID
   const orderId = ref('')
  // 选择支付渠道
  const onPaymentButtonClick = async () => {
    if (orderId.value === '') {
      // 生成待支付订单接口
      const data = await createOrderApi(props.id,addressInfo.value.id)
      // 传递订单ID
      orderId.value = data.id
    }
    paymentRef.value.open()
  }
</script>

<template>
  <scroll-view background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-shippment">
          <view class="region">
            <uni-icons size="16" color="#FF7702" type="location-filled" />
            {{ addressInfo.province }}{{ addressInfo.city }}
          </view>
          <view class="detail">{{ addressInfo.addressDetail }}</view>
          <view class="receiver">{{ addressInfo.receiver }} {{ addressInfo.mobile }}</view>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in preOrderInfo.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
        <!-- <view class="medicine-list-item">
          <image
            class="medicine-cover"
            src="/static/uploads/medicine-2.jpg"
            mode="aspectFill"
          />
          <view class="medicine-info">
            <text class="name">瑞巴派特片</text>
            <text class="unit symbol">24片</text>
            <text class="price">¥25.00</text>
          </view>
          <view class="quantity">x1</view>
          <view class="guide">用法用量：口服，每次1袋，每天3次，用药3天</view>
        </view> -->
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="'￥' + preOrderInfo.payment.toFixed(2)" />
          <uni-list-item title="运费" :right-text="'¥' + preOrderInfo.couponDeduction.toFixed(2)" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="'¥' + preOrderInfo.pointDeduction.toFixed(2)"
          />
          <uni-list-item title="实付款" :right-text="'¥' + preOrderInfo.actualPayment.toFixed(2)" />
        </uni-list>
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <view class="total-amount">
          需付款: <text class="number">¥{{ preOrderInfo.actualPayment.toFixed(2) }}</text>
        </view>
        <view class="buttons">
          <button class="uni-button" @click="onPaymentButtonClick">立即支付</button>
        </view>
      </view>
    </view>
    <custom-payment
      @close="onPaymentClose"
      @confirm="onPaymentConfirm"
      :amount="preOrderInfo.actualPayment"
      :order-id="orderId"
      ref="paymentRef"
    ></custom-payment>
  </scroll-view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
